<template>
  <div class="person">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{ fullName }}</span> 
    <button @click="changeFullName">修改全名为李-四</button>
  </div>
</template>

<script setup lang="ts" name="Person">
    import { ref,computed } from 'vue'

    let firstName = ref('张')
    let lastName = ref('三')
    //这么定义的fullName是一个计算属性，且是只读的
    // let fullName = computed(() => {
    //   return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    // })

    //这么定义的fullName是一个计算属性，是可读可写的
    let fullName = computed({
      get() {
        return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
      },
      set(value) {
        let names = value.split('-')
        firstName.value = names[0]
        lastName.value = names[1]
      }
    })
    function changeFullName() {
      fullName.value = "李-四"
    }
</script>
<style scoped>
.person {
    /* 背景颜色 */
    background-color: skyblue;
    /* 阴影 */
    box-shadow: 0 0px 10px;
    /* 圆角 */
    border-radius: 4px;
    padding: 20px; /* 内边距 */
}
button { 
    margin: 0 5px;
}
</style>


